<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1">
  <title> HLS直播间</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    html,
    body {
      width: 100%;
      height: 100%;
    }

    video {
      width: 100%;
      max-width: 800px;
      height: auto;
    }

    input,
    button {
      width: 500px;
      height: 37.5px;
      font-size: 18px;
      margin-top: 15px;
    }
  </style>

</head>

<body>
  <div style="text-align: center;">
    <video id="live" style="width: 800px;height: 600px;" autoplay controls>
      <source src="" />
    </video>

    <br />
    <input type="text" value="http://192.168.1.185:8080/hls/rs_4.m3u8" id="hls_src" placeholder="请输入hls地址">
    <br>
    <button onclick="play()">点击播放</button>
  </div>

  <script src="../src/js/hls.js"></script>
  <script>
    var video = document.getElementById('live');
    let valueEl = document.getElementById('hls_src')

    // let url = "http://192.168.1.250:8080/hls/1.m3u8"

    function play() {
      if (Hls.isSupported()) {
        var hls = new Hls();
        hls.attachMedia(video);
        // MEDIA_ATTACHED event is fired by hls object once MediaSource is ready
        hls.on(Hls.Events.MEDIA_ATTACHED, function () {
          console.log('video and hls.js are now bound together !');
          hls.loadSource(valueEl.value);
          hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
            console.log(
              'manifest loaded, found ' + data.levels.length + ' quality level'
            );
          });
        });
      } else {
        video.src = valueEl.value
        // alert("浏览器不支持hls.js")
        alert("浏览器不支持hls.js")
      }
      console.log("点击播放")
      video.play()
    }

    /*
    *
    *
  $ffplay rtmp://127.0.0.1/live/test110
  $ffplay rtsp://127.0.0.1:5544/live/test110
  $ffplay http://127.0.0.1:8080/live/test110.flv
  $ffplay http://127.0.0.1:8080/hls/test110/playlist.m3u8
  $ffplay http://127.0.0.1:8080/hls/test110/record.m3u8
  $ffplay http://127.0.0.1:8080/hls/test110.m3u8
  $ffplay http://127.0.0.1:8080/live/test110.ts
    *
    *
    *
    *
    * */
  </script>
</body>

</html>